<template>
  <div>
    今年:<input type="text" v-model="age">
    <p>今年的年纪: {{age}}</p>
    明年: <input type="text" v-model="nextAge">
    <p>明年的年纪: {{nextAge}}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
export default {
  setup() {
    const age = ref(18)
    // 简单形式 传入一个函数
    // const nextAge = computed(() => {
    //   return +age.value + 1
    // })
    // 全量形式  传入对象   对象里有get函数 和set函数,set函数的形参可以接收计算属性的变化值
    const nextAge = computed({
      get() {
        return +age.value +1
      },
      set(val) {
        age.value = val - 1
      }
    })

    return {
      age,nextAge
    }
  }
}
</script>

<style>

</style>
